<template>
  <transition appear>
    <div class="accout">
      <AccoutHeaderVue @changeswitch="changeswitch"></AccoutHeaderVue>
      <AccoutBottomVue :switchnum="switchnum"></AccoutBottomVue>
      <!-- <SongItemVue :songs="songs"></SongItemVue> -->
    </div>
  </transition>
</template>

<script>
import AccoutBottomVue from "../components/Accout/AccoutBottom.vue";
import AccoutHeaderVue from "../components/Accout/AccoutHeader.vue";
import SongItemVue from "../components/SongItem.vue";
export default {
  name: "Accout",
  data() {
    return {
      switchnum: 0,
    };
  },
  //   props:{
  //       songs:{
  //           type:Array,
  //           default:[],
  //           required:true
  //       }
  //   },
  methods: {
    changeswitch(num) {
      this.switchnum = num;
    },
  },
  components: {
    AccoutHeaderVue,
    SongItemVue,
    AccoutBottomVue,
  },
};
</script>

<style scoped lang="scss">
@import "../assets/css/variable.scss";
@import "../assets/css/mixin.scss";
.accout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  //   background-color: red;
  @include bg_sub_color();
}
.v-enter {
  transform: translateX(100%);
}
.v-enter-to {
  transform: translateX(0);
}
.v-enter-active {
  transition: transform 1s;
}
.v-leave {
  transform: translateX(0);
}
.v-leave-to {
  transform: translateX(100%);
}
.v-leave-active {
  transition: transform 1s;
}
</style>
